
<div style="POSITION: relative" id="content">
  <h3>easyUI 通过ajax的方式提交Form </h3>
  <div id="article_content" class="article_content">
    <p>这个教程向你展示使用<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">easyui提交一个form,我们创建一个示例form和<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">name, email
      和phone 字段.通过使用<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">form 插件我们改变form为ajax form,form提交所有</span></span></span></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">字段到后台服务器,服务器处理和发送一些数据返回到前端页面,我们显示数据和显示出来.</span></span></span></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><img src="documentation/images/1344910770_6637.png" alt=""><br>
      </span></span></span></p>
<h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 创建 Form</h4>
    <pre name="code" class="html">&lt;div style=&quot;padding:3px 2px;border-bottom:1px solid #ccc&quot;&gt;Ajax Form&lt;/div&gt;  
&lt;form id=&quot;ff&quot; action=&quot;form1_proc.php&quot; method=&quot;post&quot;&gt;  
    &lt;table&gt;  
        &lt;tr&gt;  
            &lt;td&gt;Name:&lt;/td&gt;  
            &lt;td&gt;&lt;input name=&quot;name&quot; type=&quot;text&quot;&gt;&lt;/input&gt;&lt;/td&gt;  
        &lt;/tr&gt;  
        &lt;tr&gt;  
            &lt;td&gt;Email:&lt;/td&gt;  
            &lt;td&gt;&lt;input name=&quot;email&quot; type=&quot;text&quot;&gt;&lt;/input&gt;&lt;/td&gt;  
        &lt;/tr&gt;  
        &lt;tr&gt;  
            &lt;td&gt;Phone:&lt;/td&gt;  
            &lt;td&gt;&lt;input name=&quot;phone&quot; type=&quot;text&quot;&gt;&lt;/input&gt;&lt;/td&gt;  
        &lt;/tr&gt;  
        &lt;tr&gt;  
            &lt;td&gt;&lt;/td&gt;  
            &lt;td&gt;&lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;&lt;/input&gt;&lt;/td&gt;  
        &lt;/tr&gt;  
    &lt;/table&gt;  
&lt;/form&gt;  </pre>
    <p></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"></span></span></span></p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 改变为Ajax form</h4>
    <pre name="code" class="javascript">$('#ff').form({  
    success:function(data){  
        $.messager.alert('Info', data, 'info');  
    }  
});  </pre>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 服务器端代码</h4>
    <span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">form1_proc.php</span>
    <p></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"></span></span></span>
    <pre name="code" class="php">$name = $_POST['name'];  
$email = $_POST['email'];  
$phone = $_POST['phone'];  
  
echo &quot;Your Name: $name &lt;br/&gt; Your Email: $email &lt;br/&gt; Your Phone: $phone&quot;;  </pre>
    </p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载 &nbsp;EasyUI 示例代码:</h4>
    <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px"> <a href="http://www.jeasyui.com/tutorial/form/downloads/easyui-form1-demo.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-form-demo.zip</a></div>
    <br>
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>